<template>
	<view class="productItem">
		<view class="boxtop" @click="checkItem">
			<up-image :show-loading="true" :src="baseUrl+product.pic" width="334rpx" height="334rpx" radius="8rpx" @click="click"></up-image>
			<view class="pinpai">{{ product.newKey }}</view>
			<view class="renqi">人气推荐</view>
			<view class="zhuanti">专题推荐</view>
			<view class="xinpin">新品推荐</view>
		</view>
		<view class="boxbottom" @click="checkItem">
			<view class="name">{{ product.name }}</view>
			<view class="priceBox">
				<priceNumber :price="product.price"></priceNumber>
				<view class="oldPrcie">￥{{ product.demoPrice }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import env from '@/config/common.js'
import priceNumber from '@/components/priceNumber.vue'
let baseUrl = env.API_BASE_URL_DEV
let prop = defineProps({
    product:{
		type: Object,
		default: () => {}
	}
})
const emit = defineEmits(['change'])
const checkItem = ()=>{
	emit('change',prop.product.id)
}
onMounted(()=>{
	// console.log('123123123',product);
})
</script>

<style scoped lang="scss">
.productItem{
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	.boxtop{
		position: relative;
		border-radius: 8rpx;
		.pinpai{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #FF4D1B;
			border-radius: 0 8rpx 0 8rpx;
		}
		.renqi{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #8169FC;
			border-radius: 0 8rpx 0 8rpx;
		}
		.zhuanti{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #458AFF;
			border-radius: 0 8rpx 0 8rpx;
		}
		.xinpin{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #FD0021;
			border-radius: 0 8rpx 0 8rpx;
		}
	}
	.boxbottom{
		height: 154rpx;
		padding: 16rpx 8rpx;
		box-sizing: border-box;
		.name{
			color: #000000;
			font-weight: 400;
			font-size: 24rpx;
			margin-bottom: 16rpx;
		}
		.priceBox{
			display: flex; 
			align-items: center;
			.oldPrcie{
				color: #999999;
				font-weight: 400;
				font-size: 22rpx;
				margin-left: 8rpx;
				line-height: 26rpx;
			}
		}
		
	}
}
</style>